<script setup lang="ts">
import { onMounted, ref } from 'vue'
import DashboardHeader from '~/components/DashboardHeader/index.vue'
import ItemEight from './components/item-eight.vue'
import ItemFive from './components/item-five.vue'
import ItemFour from './components/item-four.vue'
import ItemOne from './components/item-one.vue'
import ItemServen from './components/item-serven.vue'
import ItemSix from './components/item-six.vue'
import ItemThree from './components/item-three.vue'
import ItemTwo from './components/item-two.vue'
import MapItem from './components/map-item.vue'
import TopItem from './components/top-item.vue'

import HeaderTitle from './header-title.png'

import { sysIntApi } from '@/api'

import type { BasicInfo, ERPAnalysis, ERPCustomer, ERPRank } from './type'

const show = ref(false)

const basicInfo = ref<BasicInfo>()
const erpAnalysis = ref<ERPAnalysis>()
const erpCustomer = ref<ERPCustomer>()
const erpRank = ref<ERPRank>()

async function getBasicInfo() {
  const res = await sysIntApi.getErpBasicInfo()
  basicInfo.value = res.data as BasicInfo
}

async function getErpAnalysis() {
  const res = await sysIntApi.getErpAnalysisInfo()
  erpAnalysis.value = res.data as ERPAnalysis
}

async function getErpCustomer() {
  const res = await sysIntApi.getErpCustomerInfo()
  erpCustomer.value = res.data as ERPCustomer
}

async function getErpRank() {
  const res = await sysIntApi.getErpRankInfo()
  erpRank.value = res.data as ERPRank
}

onBeforeMount(async () => {
  await getBasicInfo()
  await getErpAnalysis()
  await getErpCustomer()
  await getErpRank()
})

onMounted(() => {
  show.value = true
})
</script>

<template>
  <div class="dashboard-wrapper h-full w-full overflow-auto">
    <div class="erp-dashboard dashboard relative h-full min-h-900px min-w-1600px w-full">
      <DashboardHeader class="absolute left-0 right-0 top-0 z-12" :title-img="HeaderTitle" />
      <div class="left-panel absolute bottom-0 left-0 top-16 z-1 flex flex-col gap-3 p-3">
        <Transition
          enter-active-class="animate__animated animate__fadeInLeft"
          leave-active-class="animate__animated animate__fadeOutLeft"
        >
          <ItemOne v-if="basicInfo" class="max-h-70" :data="basicInfo" />
        </Transition>
        <Transition
          enter-active-class="animate__animated animate__fadeInLeft animate__delay-1s"
          leave-active-class="animate__animated animate__fadeOutLeft"
        >
          <ItemTwo v-if="erpAnalysis?.orderInInfo" class="max-h-80" :data="erpAnalysis?.orderInInfo" />
        </Transition>
        <Transition
          enter-active-class="animate__animated animate__fadeInLeft animate__delay-2s"
          leave-active-class="animate__animated animate__fadeOutLeft"
        >
          <ItemThree v-if="erpRank?.productInfo" :data="erpRank?.productInfo" />
        </Transition>
      </div>
      <div class="right-panel absolute bottom-0 right-0 top-16 z-1 flex flex-col gap-3 p-3">
        <Transition
          enter-active-class="animate__animated animate__fadeInRight"
          leave-active-class="animate__animated animate__fadeOutRight"
        >
          <ItemFour v-if="basicInfo" class="max-h-70" :data="basicInfo" />
        </Transition>
        <Transition
          enter-active-class="animate__animated animate__fadeInRight animate__delay-1s"
          leave-active-class="animate__animated animate__fadeOutRight"
        >
          <ItemFive v-if="erpAnalysis?.orderOutInfo" class="max-h-80" :data="erpAnalysis?.orderOutInfo" />
        </Transition>
        <Transition
          enter-active-class="animate__animated animate__fadeInRight animate__delay-2s"
          leave-active-class="animate__animated animate__fadeOutRight"
        >
          <ItemSix v-if="erpRank?.provinceSales" :data="erpRank?.provinceSales" />
        </Transition>
      </div>
      <div class="bottom-panel absolute bottom-0 left-1/2 z-1 flex gap-20 -translate-x-1/2">
        <Transition
          enter-active-class="animate__animated animate__fadeInUp"
          leave-active-class="animate__animated animate__fadeOutUp"
        >
          <ItemServen v-if="erpCustomer?.customerHealth" :data="erpCustomer?.customerHealth" />
        </Transition>
        <Transition
          enter-active-class="animate__animated animate__fadeInUp"
          leave-active-class="animate__animated animate__fadeOutUp"
        >
          <ItemEight v-if="erpCustomer?.customerConversion" :data="erpCustomer?.customerConversion" />
        </Transition>
      </div>
      <div v-if="false" class="top-panel absolute left-1/2 top-21 z-2 flex gap-3 -translate-x-1/2">
        <TopItem :type="1" title="低库存产品" :value="basicInfo?.lowInventoryNum ?? 0" unit="种" />
        <TopItem :type="2" title="超期未支付" :value="basicInfo?.orderOutOverdueNum ?? 0" unit="单" />
        <TopItem :type="3" title="未收账款总额" :value="basicInfo?.outstandingReceivablesNum ?? 0" unit="元" />
      </div>
      <div class="middle-panel absolute bottom-60 left-100 right-100 top-5 z-1">
        <MapItem v-if="erpAnalysis?.customerInfo" :data="erpAnalysis.customerInfo" />
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.dashboard-wrapper {
  scrollbar-width: thin;
  .dashboard {
    background-color: rgb(6, 19, 42);
    background-image: url('~/assets/images/bg.webp');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;

    .block-body {
      background: rgba(31, 82, 145, 0.1);
    }
    .text-xs {
      @apply text-xs;
    }
    .text-sm {
      @apply text-sm;
    }
    .text-md {
      @apply text-md;
    }
    .text-lg {
      @apply text-lg;
    }
    .text-xl {
      @apply text-xl;
    }
    .text-2xl {
      @apply text-2xl;
    }
  }
}

.erp-dashboard {
  --animate-delay: 0.2s;
  --block-width: 29rem;

  .right-panel,
  .left-panel {
    width: var(--block-width);
    overflow: hidden;
  }

  .bottom-panel {
    overflow: hidden;
    .block-bottom {
      width: 33rem;
      @media screen and (max-width: 1610px) {
        width: 24rem;
      }
    }
    .block-bottom-head {
      height: 2.2rem;
      line-height: 2.2rem;
      letter-spacing: 1px;
      color: rgba(255,255,255,0.78);
    text-shadow: 0px 2px 2px rgba(0,9,17,0.36);
      background: linear-gradient(90deg, rgba(46,137,250,0), rgba(46,137,250,0.6), rgba(46,137,250,0));
    }
    .pie-center-circle {
      position: absolute;
      left: 50%;
      top: 55%;
      transform: translate(-50%, -50%);
      width: 5rem;
      aspect-ratio: 1;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.7);
      &:before {
        content: '';
        position: absolute;
        left: -5px;
        right: -5px;
        top: -5px;
        bottom: -5px;
        border-radius: 50%;
        background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,1));
        z-index: 1;
      }
    }
    .pie-center-img {
      position: absolute;
      left: 50%;
      top: 55%;
      transform: translate(-50%, -50%);
      opacity: 0.7;
    }
  }
}
</style>
